<template>
  <div>
    <nav-bar>
        <div slot="left" class="back" @click="detailBack">
            <img src="~assets/img/back.png" alt="">
        </div>
        <div slot="center" class="title">
            <div v-for="(item,index) in titles" :key="index" class="detail-item" :class="{active:currentIndex === index}" @click="itemClick(index)">
                {{item}}
            </div>
        </div>
    </nav-bar>
  </div>
</template>

<script>
import NavBar from 'components/common/navbar/NavBar'
export default {
  name: 'ChildNavBar',
  components: {
      NavBar
  },
  methods: {
    itemClick(index) {
        this.currentIndex = index
    },
    detailBack() {
        this.$router.back()
    }
  },
  data() {
      return {
          titles: ['商品','参数','评论','推荐'],
          currentIndex: 0
      }
  },
}
</script>

<style scoped>
    .title {
        display: flex;
        font-size: 13px;
    }
    .detail-item{
        flex: 1;
    }
    .active{
        color: var(--color-high-text);
    }
    .back img {
        margin-top: 5px;
    }
</style>
